@keyframes load
  0%
    transform rotate(0deg)
  100%
    transform rotate(360deg)

body
  width 100%
  height 100%
  margin 0
  padding 0px
  font-family 'MainFont'
  font-weight 300

  #dapp
    width 100%
    height 100%
    padding 0px
    position relative

    .overlay
      position absolute
      top 0 
      right 0
      bottom 0 
      left 0
      background linear-gradient(-35deg, var(--overlayA) 0%, var(--overlayB) 100%)
      z-index 999
      pointer-events none

    .backdrop
      position absolute
      top 0px
      left 0px
      right 0px
      bottom 0px
      z-index 0
      border-radius 6px
      box-shadow cardDrop, 0px 0px 2px outerspace03
      pointer-events none

    .splash
      position absolute
      top 0px
      left 0px
      right 0px
      bottom 0px
      z-index 0

    .mainLeft
      position absolute
      top 0
      left 0
      bottom 0
      width 72px
      padding-left 2px
      -webkit-user-select none
      display none

      .accountTile
        position absolute
        top 26px
        left 5px
        right 5px
        display flex
        justify-content center
        align-items center
        flex-direction column
        color var(--outerspace)
        margin 6px 0px

        .accountIcon
          height 58px
          width 58px
          background var(--ghostA)
          border-radius 16px
          display flex
          justify-content center
          align-items center
          flex-direction column
          cursor pointer

        .accountIcon:hover
          background var(--ghostB)

      .dappIcons
        position absolute
        top 72px
        bottom 72px
        left 0px
        right 0px
        display flex
        justify-content center
        align-items center

        .dappIconsScroll
          max-height 100%
          width 100%
          overflow-y scroll
          overflow-x hidden
          -webkit-user-select auto

          .dappIconsWrap
            padding-top 10px

    .main
      position absolute
      top 0
      left 0px
      bottom 0
      right 0
      // border-left 1px solid var(--ghostX)
      color var(--outerspace)
      display flex
      justify-content center
      align-items center
      -webkit-user-select none
      // overflow-y scroll
      z-index 9999
      
      .mainDappBackground
        position absolute
        top 0
        left 0
        bottom 0
        right 0
        -webkit-user-select none
        z-index 1
        display flex
        justify-content center
        align-items center

      .mainDappLoading
        .mainDappLoadingText
          font-family 'MainFont'
          text-transform uppercase
          font-size 14px
          font-weight 400
          text-align center
          line-height 20px
          letter-spacing 1px

        .loader,
        .loader:after
          border-radius 100%
          width 128px
          height 128px

        .loader
          font-size 7px
          position relative
          text-indent -9999em
          transform translateZ(0)
          animation load8 0.48s infinite linear !important
          border-top 3px solid var(--ghostY)
          border-right 3px solid var(--ghostY)
          border-bottom 3px solid var(--ghostY)
          border-left 3px solid var(--ghostD)
          will-change transform

        @keyframes load8
          0%
            transform rotate(0deg)
          100%
            transform rotate(360deg)

      .mainDappEnableChains
        height 40px
        margin-top 30px
        background var(--ghostC)
        border-bottom 2px solid var(--ghostZ)
        box-shadow 0px 1px 4px var(--ghostX)
        border-radius 15px
        box-sizing border-box
        cursor pointer
        display flex
        justify-content center
        align-items center
        font-size 14px
        font-weight 400
        letter-spacing 1px
        text-transform uppercase
        padding 1px 20px 0px 21px

      .mainDappEnableChains:hover
        background var(--ghostD)
        color var(--outerspace)

      .mainApps
        width 600px
        height 300px
        border-radius 16px
        // border 1px solid var(--ghostY)
        background var(--ghostY)

    .top
      position absolute
      top 0px
      left 0px
      right 0px
      height 37px
      z-index 50
      
      .break
        position absolute
        height 1px
        bottom 0px
        left 0
        right 0
        opacity 0.2
        background white
      
      .title
        position absolute
        top 0
        right 0
        left 0
        bottom 0
        z-index 1
        display flex
        justify-content center
        align-items center
        font-size 12px
        font-weight 300
        letter-spacing 1px
        pointer-events none
        user-select none
        font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, Cantarell, "Oxygen Sans", "Helvetica Neue", sans-serif

      .menu
        position absolute
        top 0
        right 0px
        bottom 0
        width 85px
        z-index 3
        // background red

        .reload
          height 37px
          width 34px
          padding-top 1px
          position absolute
          top 0
          right 0
          bottom 0
          box-sizing border-box
          display flex
          justify-content center
          align-items center

        .reload:hover
          // color outerspace05
          // background green

    .shade
      position absolute
      top 37px
      left 0px
      right 0px
      bottom 0px
      transition var(--standard)
      z-index 150
      border-radius 6px
      // border-bottom-left-radius 4px
      // border-bottom-right-radius 4px
      // border-bottom-left-radius 4px
      // border-bottom-right-radius 4px
      border-bottom 2px solid outerspace05
      // border-top 2px solid thick
      box-shadow reverseCardDrop // , 0px 0px 4px rgba(10, 10, 40, 0.2)
      pointer-events none

    .webloading
      display none
      position absolute
      top 37px
      left 0px
      right 0px
      bottom 0px
      z-index 100
      transition var(--standard)
      border-radius 6px
      background linear-gradient(180deg, highlight 0%, thick 100%)
      display flex
      justify-content center
      align-items center
      // box-shadow reverseCardDrop, 0px 0px 4px rgba(25, 25, 50, 0.2)

      img
        position absolute
        max-height 40px
        max-width 40px

    .webwrap
      position absolute
      top 37px
      left 0px
      right 0px
      bottom 0px
      z-index 1000
      transition var(--standard)
      border-radius 6px

      .view
        position absolute
        top 0
        left 0
        right 0
        bottom 0
        border-radius 6px
        overflow hidden
        z-index 100

      view
        height 100%
        width 100%
        // border-radius 6px

@import './DappTile/style'
